<template>
	<div class="forget">
		<view>
			<button :type="isType" @tap="sendInfo" :disabled="isDisabled" class="btnSend">
				{{text}}
			</button>
			<input class="inputStyle" type="text" @confirm="sendInfo" v-model="PhoneNumber" placeholder="请输入手机号"/>
			<text v-if="isShow" class="alertText">请输入有效的手机号码！</text>
		</view>
		<view>
			<input class="inputStyle" placeholder="请输入验证码" v-model="user.code" />
		</view>
		<view>
			<input class="inputStyle" placeholder="请输入用户名" v-model="formdata.username" />
		</view>
		<view>
			<input class="inputStyle" type="password" placeholder="设置新密码" v-model="formdata.password" />
		</view>
		<view>
			<input class="inputStyle" type="password" placeholder="确认新密码" v-model="formdata.password2" />
		</view><br/>
		<view>
			<button type="default" form-type="submit" class="loginBtn" @click="login">完成</button>
		</view>
	</div>
</template>

<script>
	const {getForget} = require('../../utils/api.js')
	const {getVCode} = require('../../utils/admin.js')
	export default {
		data() {
			return {
				PhoneNumber:'',//判断用户输入
				text: '发送',
				isDisabled: false,
				isType: 'primary',//判读按钮的颜色
				isShow:false,//是否显示红色文本提醒
				time: 60,
				user:{
					phone:'',
					code:'',
				},
				formdata:{
					username:'',
					password:'',
					password2:''
				}
			}
		},
		methods:{
			/**
			 * 验证码
			 */
			sendInfo() {
				if(this.PhoneNumber != Number && this.PhoneNumber.length != 11){//判断手机输入条件
					this.isShow = true//显示红色文本
				}
				else {
					this.isShow = false//用户输入重新输入正确的手机号后，红色文本提醒信息消除
					getVCode().then(data=>{
						uni.showModal({
							content: data,
							showCancel: false
						});
					})
					let time = this.time
					this.isDisabled = true
					this.isType = 'default'
					const timer = setInterval(() => {
						if (time == 0) {
							clearInterval(timer)//清除定时器后，以下都是恢复原始状态
							this.isDisabled = false
							this.isType = 'primary'
							this.text = '发送验证码'
							time = this.time
						} else {
							this.text = `${time}秒`
							time-- //倒计时的实现，利用递减
						}
					}, 1000)
				}
			},
			/**
			 * 点击登录
			 */
			login(){
				getForget(this.formdata).then(data=>{
					uni.showModal({
						content: data.msg,
						showCancel: false
					});
					if(data.code === 200){
						uni.navigateTo({
							url: 'login'
						});
					}
				})
			}
		}
	}
</script>

<style scoped src="../../static/css/login.css"></style>
<style scoped>
	.btnSend{
		background-color: #2BC17B;
		width: 100px;
		height: 40px;
		float: right;
		position: relative;
		top:-10px;
	}
	.alertText{
		color: red;
		display: flex;
		justify-content: center;
	}
</style>
